<template>
  <el-card>
    <div class="mb-4 filterRow">
      <el-row :gutter="5">
        <el-col :span="5" :xl="4">
          <el-date-picker
            class="my-2"
            style="max-width: 100%; min-width: 160px"
            v-model="formData.time"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('开始时间')"
            :end-placeholder="$t('结束时间')"
            @change="calendarChange"
            :default-time="pickerDefaultTime"
            clearable
          />
        </el-col>
        <el-col :span="3" :xl="2">
          <el-select
            class="my-2"
            v-model="formData.trade_type"
            :placeholder="$t('订单类型')"
            clearable
            @change="searchData"
          >
            <el-option
              v-for="item in orderTypes"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="2" :xl="2">
          <el-button class="my-2" type="primary" @click="searchData">
            {{ $t("查询") }}
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableList" v-loading="loading">
      <el-table-column
        align="center"
        prop="create_time"
        :label="$t('时间')"
        width="200"
      >
        <template #default="scope">
          {{
            dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="trade_type" :label="$t('类型')" />
      <el-table-column align="center" prop="coin_name" :label="$t('币种')" />
      <el-table-column align="center" prop="amount" :label="$t('数量')">
        <template #default="scope">
          <span
            :class="
              scope.row.sg
                ? scope.row.sg == '+'
                  ? 'text-success'
                  : 'text-danger'
                : ''
            "
          >
            {{ scope.row.sg }} {{ scope.row.amount }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="amount_after"
        :label="$t('交易后数量')"
      />
      <el-table-column
        align="center"
        prop="amount_before"
        :label="$t('冻结后数量')"
      />
      <el-table-column
        prop="loan_after"
        :label="$t('转入后数量')"
        align="center"
      />
    </el-table>

    <div class="flex justify-center mt-5">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        v-model:page-size="pageable.pageSize"
        v-model:current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { useI18n } from "vue-i18n";
import { dayjs } from "element-plus";
import { getUserRecordsApi } from "@/api/account/index";
import { pickerDefaultTime } from "@/utils/utils";
const { t } = useI18n();
const loading = ref(false);
const props = defineProps({
  uid: {
    type: Number,
    default: 0,
  },
});
let query = reactive({
  page: 1,
  pagesize: 10,
  uid: props.uid,
});

const formData = reactive({
  coin_name: "",
  bill_no: "",
  time: "",
  orderTypes: "",
  status: "",
});

// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const totalCount = ref(0);
const tableList = ref([]);
const orderTypes = ref([]);
const getWalletBills = async (data) => {
  try {
    loading.value = true;
    let params = { ...data, ...query };
    console.log(params, "params");
    const { page, list, extra } = await getUserRecordsApi(params);
    tableList.value = list;
    pageable.total = page.total_count;
    totalCount.value = page.total_count;
    orderTypes.value = extra.trade_type_map;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
const handleCurrentChange = async (number) => {
  query.page = number;
  pageable.pageNum = number;
  await getWalletBills();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getWalletBills();
};
getWalletBills();

const calendarChange = (e) => {
  formData.time = e;
  getWalletBills();
};

//处理筛选的参数
const filterQuery = computed(() => {
  return {
    start:
      formData.time && formData.time[0]
        ? timestamp(formData.time[0].valueOf())
        : "",
    end:
      formData.time && formData.time[1]
        ? timestamp(formData.time[1].valueOf())
        : "",
    trade_type: formData.orderTypes,
  };
});
const searchData = () => {
  query = { ...query, ...filterQuery.value };
  query = Object.fromEntries(
    Object.entries(query).filter(([key, value]) => {
      // 过滤空值
      return value !== "" && value !== null && value !== undefined;
    })
  );
  query.page = 1;
  getWalletBills(query);
};
</script>
